﻿
<!DOCTYPE html>
<html>
<head>
    <title>导入</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" href="/ViewV5/CSS/icfont_qj/iconfont.css">
    <link href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/animate.css">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/index.css">
    <link rel="stylesheet" type="text/css" href="/ViewV5/CSS/default.css">
    <style type="text/css">
        .ms-controller, .ms-important, [ms-controller], [ms-important] {
            visibility: hidden;
        }

        .progress-of {
            height: 3px;
            background: #e1e6ea;
        }

            .progress-of .list {
                width: 33.333%;
                float: left;
                height: 100%;
                position: relative;
            }

                .progress-of .list span {
                    width: 15px;
                    height: 15px;
                    display: inline-block;
                    position: absolute;
                    left: 50%;
                    margin-left: -5px;
                    top: -5px;
                    background: #e1e6ea;
                    border-radius: 50%;
                }

                .progress-of .list i {
                    position: relative;
                    top: -30px;
                    display: inline-block;
                }

                .progress-of .list.active {
                    background: #2798df;
                }

                    .progress-of .list.active span {
                        background: #2798df;
                    }

        .progress-item {
            margin-bottom: 40px;
        }

        .progress-item-select {
            margin-left: 25px;
        }

            .progress-item-select select {
                width: 200px;
                height: 25px;
                margin-top: 5px;
            }

        .progress-btn {
            position: fixed;
            bottom: 0;
            right: 0;
            padding: 20px;
            border-top: 1px solid #E7E7E7;
            width: 100%;
            background: #F9F9F9;
        }
    </style>
</head>
<body ms-controller="IMPORT">
    <div class="padding20" style="padding-bottom:90px;">
        <div class="progress-of tc" style="margin-top:40px;margin-bottom:30px;">
            <div class="list active">
                <span></span>
                <i>上传文档</i>
            </div>
            <div class="list">
                <span></span>
                <i>预览数据</i>
            </div>
            <div class="list">
                <span></span>
                <i>完成</i>
            </div>
        </div>
        <div class="tab">
            <div class="mb20 progress-item">
                <p>一、请按照数据模板的格式，准备要导入的数据</p>
                <p class="mb10">&nbsp;&nbsp;&nbsp;&nbsp;<a style="color:red;" ms-attr-href="/API/VIEWAPI.ashx?Action=XTGL_DOWNLOADEXCEL&headrow=1&P1={{code}}"> 下载数据模板 </a></p>
                <!--<p class="mb10">&nbsp;&nbsp;&nbsp;&nbsp;<a class=" c999">查看注意事项>></a></p>-->

            </div>
            <div class="mb20 progress-item">
                <p>二、请选择需要导入的文件</p>
                <p style="margin-left:25px;" class="mt10">
                    <button type="button" class="btn btn-info btn-sm" ms-click="djsc()"><i class="iconfont icon-fj ft14 mr5"></i>选择文件</button>
                    <input type="file" name="upFile" id="upFile" class="form-control" ms-change="YLWJ()" accept=".xls,.xlsx" style="display:none;">
                </p>
            </div>
            <div class="tp-progress mt20 mb20">
                <!--<div class="progress" style="background:#f1f1f1">
                <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 10%;background: #12b8f6;">
                </div>

                <div class="tp-title c666 ps">
                    10%
                </div>
                </div>-->

                <div class="tp-man mt5 c999" style="width:60%;display:none;background:transparent;">
                    导入中....
                </div>
                <div>
                    <span style="color:red;">{{msg|html}}</span>
                </div>
            </div>
        </div>
        <div class="tab" style="display:none;">
            <span style="color:red;">{{msg|html}}</span>
            <div class="default-tab ft14 pt20 table-responsive" style="margin-top:1rem;">
                <table class="table table-striped  table-hover">
                    <thead>
                        <tr>
                            <th class="tc">
                                <div class="icheckbox_square-blue" ms-click="checkall()" id="checkall">
                                    <input type="checkbox">
                                    <span class="iconfont icon-check ft12"></span>
                                </div>
                            </th>
                            <th ms-repeat="lmData" style="min-width: 120px;" ms-visible="$key!='status'">{{$key|html}}</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ms-repeat-el="ctData">
                            <td class="tc">
                                <div class="icheckbox_square-blue" ms-class-1="checked:el.status=='1'" ms-class-1="uncheck:el.status=='2'" ms-click="check(el,this)">
                                    <input type="checkbox">
                                    <span class="iconfont icon-check ft12"></span>
                                </div>
                            </td>
                            <td ms-repeat="ctData[$index]" ms-visible="$key!='status'">{{$val|html}}</td>
                        </tr>

                    </tbody>
                </table>

            </div>
        </div>
        <div class="tab" style="display:none;">
            <span></span>
            <br />
            <span style="color:red;">{{msg|html}}</span>
        </div>
    </div>
    <div class="progress-btn tr">
        <button type="button" class="btn btn-default" ms-click="qx()">取消</button>
        <button type="button" class="btn btn-info" ms-click="importdata()" id="ksdr" style="display:none;">开始导入</button>
    </div>
    <script src="/ViewV5/JS/jquery-1.11.2.min.js"></script>
    <script src="/ViewV5/CSS/bootstrap3.3.5/js/bootstrap.js"></script>
    <script src="/ViewV5/JS/avalon1.47.js"></script>
    <script src="/ViewV5/JS/SZHLCommon.js?jsver=20160915"></script>
    <script src="/ViewV5/JS/layer/layer.js"></script>
    <script src="/ViewV5/JS/Toast/toastr.js"></script>
    <script>
        function GetQuery(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(decodeURI(r[2]));
            else return "";
        }
        var model = avalon.define({
            $id: "IMPORT",
            ctData: [],
            lmData: {},
            msg: "",
            code: GetQuery("code"),
            XZMB: function () {
                if (model.code) {
                    var str;
                    switch (model.code) {
                        case "KHGL": str = "CRM_客户_导入模板.xlsx"; break;
                        case "KHLXR": str = "CRM_客户联系人_导入模板.xlsx"; break;
                        case "HTGL": str = "CRM_合同_导入模板.xlsx"; break;
                    }
                    return str;
                }
                else {
                    return "";
                }
            },
            djsc: function () {
                $("#upFile").trigger("click");
            },
            YLWJ: function () {
                model.ctData.clear();
                model.msg = "";
                if (document.getElementById("upFile").files.length > 0) {
                    $(".tp-man").show();
                    var formData = new FormData();
                    formData.append("upFile", document.getElementById("upFile").files[0]);
                    $.ajax({
                        url: "/API/VIEWAPI.ashx?ACTION=XTGL_EXCELTOTABLE&P1=" + model.code + "&headrow=1&r=" + Math.random(),
                        type: "POST",
                        data: formData,
                        /**
                        *必须false才会自动加上正确的Content-Type
                        */
                        contentType: false,
                        /**
                        * 必须false才会避开jQuery对 formdata 的默认处理
                        * XMLHttpRequest会对 formdata 进行正确的处理
                        */
                        processData: false,
                        success: function (result) {
                            $(".tp-man").hide();
                            document.getElementById("upFile").outerHTML = document.getElementById("upFile").outerHTML;
                            $("#upFile").change(function () {
                                model.YLWJ();
                            });
                            var r = $.parseJSON(result);
                            if (r.ErrorMsg == "") {
                                if (r.Result) {
                                    model.ctData = r.Result;
                                    $(".list").removeClass("active");
                                    $(".list").eq(1).addClass("active");
                                    $(".tab").hide();
                                    $(".tab").eq(1).show();
                                    $("#ksdr").show();
                                    model.checkall();
                                }
                                model.msg = r.Result1;
                                if (r.Result.length > 0) {
                                    model.lmData = r.Result[0];
                                }

                                //$("#checkall").attr("checked", "checked");
                            }
                            else {
                                //ComFunJS.winwarning(r.ErrorMsg);
                                model.msg = r.ErrorMsg;
                            }
                        }
                    });
                }
                else {
                    //ComFunJS.winwarning("请上传文件");
                    model.msg = "请上传文件";
                }
            },
            checkall: function () {
                $("#checkall").toggleClass("checked");
                $(model.ctData).each(function (index, ele) {
                    if (ele.status != "2") {
                        //if ($("#checkall").is(':checked')) {
                        if ($("#checkall").hasClass("checked")) {
                            ele.status = "1";
                        }
                        else {
                            ele.status = "0";
                        }
                    }
                })
            },
            check: function (el, obj) {
                if (el.status != "2") {
                    $(this).toggleClass("checked");
                    //if ($(obj).is(':checked')) {
                    if ($(obj).hasClass("checked")) {
                        el.status = "1";
                    }
                    else {
                        el.status = "0";
                        $("#checkall").removeClass("checked");
                    }
                }
            },
            qx: function () {
                top.layer.closeAll();

            },
            importdata: function () {
                if (model.ctData.length > 0) {
                    //ComFunJS.winwarning("请选择导入的数据");
                    var bl = true;
                    model.ctData.forEach(function (a) {
                        if (a.status == "1") {
                            bl = false;
                        }
                    })
                    if (bl) {
                        model.msg = "请选择导入的数据";
                    }
                    else {
                        if (model.code) {
                            var str;
                            switch (model.code) {
                                case "KHGL": str = "CRM_IMPORTKH"; break;
                                case "KHLXR": str = "CRM_IMPORTLXR"; break;
                                case "HTGL": str = "CRM_IMPORTHT"; break;
                            }
                            $.post('/API/VIEWAPI.ashx?Action=' + str + '&r=' + Math.random(), { "P1": JSON.stringify(model.ctData.$model) }, function (resultData) {
                                if (resultData.ErrorMsg == "") {
                                    model.ctData.clear();
                                    $(".list").removeClass("active");
                                    $(".list").eq(2).addClass("active");
                                    $(".tab").hide();
                                    $(".tab").eq(2).show();
                                    $("#ksdr").hide();
                                    if (resultData.Result) {
                                        //top.ComFunJS.winsuccess("导入部分成功！！" + resultData.Result);
                                        model.msg = "导入部分成功！！<br/>" + resultData.Result;
                                    }
                                    else {
                                        //top.ComFunJS.winsuccess("导入成功！！");
                                        model.msg = "导入成功！！ ";
                                    }
                                    if (resultData.Result1) {
                                        model.msg = model.msg + "<br/>共导入" + resultData.Result1 + "条数据 ";
                                    }
                                }
                          
                            })
                        }
                        else {
                            model.msg = "导入失败,请重试！！";
                        }
                    }
                }
                else {
                    model.msg = "请选择导入的文件";
                }
            }
        });
        avalon.ready(function () {

        })

        function getData() {
            return model.ctData;
        }
    </script>
</body>
</html>
